<template>
  <div class="app-container">

    <!--<div class="listDiv">
      <div class="tableDiv" @mouseenter="stopScroll" @mouseleave="autoScroll">
        <div class="tHeaderContainer">
          <table class="tHeader">
            <thead>
              <tr ref="tr">
                <th>负责人</th>
                <th>任务</th>
                <th>备注</th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="scrollContainer">
          &lt;!&ndash; 用ref绑定后就不需要再获取dom节点了，直接绑定table和tBody，然后$refs里面调用就行。
          在javascript里面调用：this.$refs.table  这样就可以减少获取dom节点的消耗了 &ndash;&gt;
          <table ref="table" class="tTableName">
            <tbody ref="tBody">
              <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ item.functionary }}</td>
                <td>{{ item.task }}</td>
                <td><i class="el-icon-more" /></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>-->
    <!--<div style="width: 100px;height: 100px;margin-top: 100px;">
        <marquee behavior="scroll" direction="up" scrolldelay="500">
          <ul>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
          </ul>
        </marquee>

      </div>-->
    <!--<el-form class="login-form" auto-complete="on" label-position="left">
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          name="password"
          tabindex="2"
          auto-complete="on"
        />
        <span class="show-pwd">
          <svg-icon icon-class="eye-open" />
        </span>
      </el-form-item>

      <el-button type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>

    </el-form>-->

    <!--<div class="navSearchBox">
      <el-input v-model="searchID" class="input-with-select searchContent" placeholder="请输入用户ID" style="width: 40%">
        <el-button slot="append" class="searchButton" icon="el-icon-search" @click="onSubmit()" />
      </el-input>
    </div>-->

    <!--<el-card class="box-card-info" shadow="always" style="width: 100%">
      <div slot="header" class="clearfix">
        <span style=" float:left;font-weight:bold">客户信息</span>
      </div>
      <el-form ref="form" :inline="true" style="text-align: left">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="用户ID: ">
              {{ userForm.custId }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记姓名:">
              {{ userForm.custName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卡号:">
              {{ userForm.serialNum }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码:">
              {{ userForm.contactPhone }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入网时间:">
              {{ userForm.createTime }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入网年限:">
              {{ userForm.duration }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否欠费:">
              {{ userForm.custStatus }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区域:">
              {{ userForm.fullAddr }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
-->
    <!--{{ name1 }}

    <el-button @click="testname"> ces</el-button>
-->

    <!--<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>

-->

    <!--<table
      width="100%"
      class="table-a"
      border="0"
      cellspacing="0"
      cellpadding="0"
    >
      <tr>
        <td class="td-item tc" width="348">
          <div class="td-cell">单项选择</div>
        </td>
        <td class="td-item">
          <div class="td-cell">一、单项选择题（本题共20小题，每小题1分，共20分，选错、多选，未选均不得分）</div>
        </td>
      </tr>
      <tr>
        <td class="td-item tc">
          <div class="td-cell" style="text-align: center">
            <ul class="c-list">
              <li class="active">1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
            </ul>
          </div>
        </td>
        <td class="td-item" rowspan="11">
          <div class="td-content">
            <div class="subject-info">
                <div class="si-content">
                  <p class="si-title">1.今天是哪一年？</p>
                  <ul class="si-check">
                    <li>A、2019年</li>
                    <li>B、2020年</li>
                    <li>C、2021年</li>
                    <li>D、2022年</li>
                  </ul>
                </div>
            </div>
            <div class="si-operation">
              <el-checkbox v-model="checked">标记</el-checkbox>
              <el-button>上一题</el-button>
              <el-button>下一题</el-button>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="td-item tc" >
          <div class="td-cell">多选题</div>
        </td>
      </tr>
      <tr>
        <td class="td-item">
          <div class="td-cell" style="text-align: center">
            <ul class="c-list">
              <li class="active">1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <td class="td-item tc">
          <div class="td-cell">判断题</div>
        </td>
      </tr>
      <tr>
        <td class="td-item">
          <div class="td-cell" style="text-align: center">
            <ul class="c-list">
              <li class="active">1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <td class="td-item tc">
          <div class="td-cell">简答题</div>
        </td>
      </tr>
      <tr>
        <td class="td-item">
          <div class="td-cell" style="text-align: center">
            <ul class="c-list">
              <li class="active">1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <td class="td-item tc">
          <div class="td-cell">分析题</div>
        </td>
      </tr>
      <tr>
        <td class="td-item tc">
          <div class="td-cell" style="text-align: center">
            <ul class="c-list">
              <li class="active">1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
              <li>6</li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <td class="td-item ">
          考试说明，本次考试时间为150分钟，满分为150分；考试过程中需严格遵守考场纪律，不得抄袭偷看他人答案，一经发现，本次考试作废，且下次不能报名此类考试。
        </td>
      </tr>
    </table>-->

    <!--
    <div
      style="position:relative;margin-top: 100px;margin-left:100px;
      width: 100px;height: 100px;overflow: hidden;border: 1px solid #ccc">

      <div id="scrollId">
        <div>hello1</div>
        <div>hello2</div>
        <div>hello3</div>
        <div>hello4</div>
        <div>hello5</div>
        <div>hello6</div>
        <div>hello7</div>
        <div>hello8</div>
        <div>hello9</div>
        <div>hello12</div>
        <div>hello12</div>
        <div>hello15</div>
      </div>

    </div>

-->

    <father ref="father" :text="text" />

    <div>
      {{ message }}
    </div>

  </div>

</template>

<script>

import father from './father'
let scrollTimer
export default {
  components: {
    father
  },
  provide() {
    return {
      name: this.name,
      text: this.text
    }
  },
  data() {
    return {
      message: '',
      text: 'hello',
      name: 'luolinlan',
      /* activeIndex: '1',
      name1: 1,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      userForm: {},
      searchID: '',
      userTag: {},
      tagTable: {
        userAttribute: [],
        businessAttribute: [],
        viewsBehavior: []
      },*/
      tableData: [
        '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'
      ].reduce((pre, cur, currentIndex) => {
        const data = {}
        data.functionary = cur + '号工人'
        switch (cur) {
          case '1':
          case '5':
            data.task = '完成AAA'
            break
          case '2':
          case '6':
            data.task = '完成BBB'
            break
          case '3':
          case '8':
            data.task = '完成CCC'
            break
          case '4':
          case '10':
            data.task = '完成DDD'
            break
          case '7':
            data.task = '完成EEE'
            break

          default:
            data.task = '完成FFF'
            break
        }
        pre.push(data)
        // console.log(data,pre,8888);
        return pre
      }, [])
    }
  },
  mounted() {
    // this.autoScroll1()
    this.message = this.$refs.father.message
  },

  methods: {
    autoScroll1() {
      var pannel = document.getElementById('scrollId')
      pannel.innerHTML += pannel.innerHTML
      var top = 0
      var timer = null

      // pannel.style.top = '-20px'
      function move() {
        timer = setInterval(() => {
          top -= 4
          if (top <= -145) {
            top = 0
          }
          pannel.style.top = top + 'px'
        }, 200)
      }
      move()
      pannel.onmouseenter = function() {
        clearInterval(timer)
      }
      pannel.onmouseleave = function() {
        move()
      }
    },

    autoScroll() {
      const table = this.$refs.table
      const tBody = this.$refs.tBody
      // 保留这个子节点在原先位置的显示,先用Node.cloneNode方法复制出一个节点的副本,然后再插入到新位置
      // 用法：var dupNode = node.cloneNode(deep);node表示将要被克隆的节点，dupNode克隆生成的副本节点
      // deep 可选是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身
      // appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
      table.appendChild(tBody.cloneNode(true))
      // 元素的height为在tr中设置的height: 1.8rem，所以offsetHeight始终为 1.8rem
      // (offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。)
      const speed = table.getElementsByTagName('td')[0].offsetHeight
      function scroll() {
        const top = table.offsetTop
        // offsetTop：DOM对象的上边距离定位父级（最近有定位属性的父级）的上边的距离，也就是table与scrollContainer的距离，初始值为0
        // tBody的offsetHeight是固定值，top表示超出tbody的部分为负数，0.5s循环一次，不断减去speed
        if (top <= speed - tBody.offsetHeight) {
          table.style.transition = '0s'
          table.style.top = 0
        } else {
          table.style.transition = 'ease 0.5s'
          table.style.top = top - speed + 'px'
        }
      }
      scrollTimer = setInterval(scroll, 500)
    },
    stopScroll() {
      clearInterval(scrollTimer)
    }
    /* testname() {
      var arr = [1, 2, [2, 3, [3, 4]]]
      var result = []
      var deep = (data) => {
        data.forEach(item => {
          if (Object.prototype.toString.call(item) === '[object Array]') {
            deep(item)
          } else {
            var indexTag = result.indexOf(item)
            if (indexTag === -1) {
              result.push(item)
            }
          }
        })
      }

      deep(arr)
      console.log(result)
      /!* console.log(1)

      this.$nextTick(() => {
        console.log(5)
      })
      new Promise((resolve, reject) => {
        console.log(2)
        resolve()
      }).then(() => {
        console.log(3)
      })

      setTimeout(() => {
        console.log(4)
        new Promise((resolve, reject) => {
          console.log(6)
          resolve()
        }).then(() => {
          console.log(7)
        })
      })*!/
    },*/
    /* name1() {
      console.log('=================1221')
    },*/
    /* onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }*/
  }
}
</script>

<style scoped>
  #scrollId{
    position: absolute;
    top:0;
    left:0;
  }
  #scrollId div{
    height: 20px;
    line-height: 20px;
  }

  .listDiv {
    width: 20%;
    height: 96%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1%;
    position: relative;
    background:#409EFF;
  }

  .tableDiv {
    z-index: 100;
    width: 90%;
    height: 90%;
    pointer-events: auto;
    padding: 0 1%;
    box-shadow: 0 0 1rem #b8b7b780 inset;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .tableDiv::before,
  .tableDiv::after {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    transition: 0.3s ease-in-out;
  }
  .tableDiv::before {
    top: -0.1rem;
    left: -0.1rem;
    border-top: 0.15rem solid #769ce2;
    border-left: 0.15rem solid #769ce2;
  }
  .tableDiv::after {
    right: -0.1rem;
    bottom: -0.1rem;
    border-bottom: 0.15rem solid #769ce2;
    border-right: 0.15rem solid #769ce2;
  }
  .tableDiv:hover::before {
    width: 100%;
    height: 100%;
    border-top: 0.15rem solid #769ce2;
    border-left: 0.15rem solid #769ce2;
    animation: glow_before 1s ease-out infinite alternate;
  }
  .tableDiv:hover::after {
    width: 100%;
    height: 100%;
    border-bottom: 0.15rem solid #769ce2;
    border-right: 0.15rem solid #769ce2;
    animation: glow_after 1s ease-out infinite alternate;
  }

  .tHeaderContainer {
    position: relative;
    height: 2.7rem;
    width: 100%;
    overflow: hidden;
  }
  .scrollContainer {
    position: relative;
    height: calc(100% - 2.7rem);
    width: 100%;
    overflow: hidden;
  }

  .tHeader,
  .tTableName {
    position: absolute;
    width: 100%;
    height: 100%;
    /* border-collapse属性是运用在table标签里的， collapse值会让 边框合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 */
    border-collapse: collapse;
  }
  tr {
    height: 2rem;
    font-size: 0.8rem;
    text-align: center;
    border-bottom: 1px dashed rgb(107, 101, 119);
  }
  th {
    font-size: 0.95rem;
    height: 2.5rem;
    width: 30%;
    text-align: center;
  }
  td {
    width: 30%;
    height: 100%;
    text-align: center;
  }
  /*@font-face {
    font-family: "sysFont";
    src: url("/static/font/时尚中黑简体.ttf");
  }*/
  @keyframes glow_before {
    0% {
      box-shadow: -0.1rem -0.1rem 0.2rem #408acf50;
    }
    100% {
      box-shadow: -0.5rem -0.5rem 1rem #769ce2;
    }
  }
  @keyframes glow_after {
    0% {
      box-shadow: 0.1rem 0.1rem 0.2rem #408acf50;
    }
    100% {
      box-shadow: 0.5rem 0.5rem 1rem #769ce2;
    }
  }
  </style>

<!--<style lang="scss" scoped>

  .c-list{
    padding: 0 10px;
    list-style: none;
    vertical-align: top;
    li{
      float: left;
      padding: 10px 15px;
      border: 1px solid #ccc;
      margin-right:10px;
      box-sizing: border-box;
      vertical-align: middle;
    }
    li:last-child{
      margin-right:0 !important;
    }
    li.active{
      background-color: #409EFF;
    }
    &:hover{
      cursor: pointer;
    }
  }
  .td-content{
    padding: 0;
    margin: 0;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
  }
  table[class='table-a']{position:relative;border-right:1px solid #ccc !important;border-bottom:1px solid #ccc !important;}
  table[class='table-a'] td{border-left:1px solid #ccc!important;border-top:1px solid #ccc !important;}
  .td-item{
    padding: 12px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
    &.tc{
      text-align: center;
    }
  }
  .td-cell{
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-left: 10px;
    padding-right: 10px;
  }

  /*.el-table .el-table__cell {
    padding: 12px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
  }*/

  .userInfo {
    padding: 20px;
    background-color: #f4f5fc;
    // background-color: #fafafa;
    height: 100%;
    // 基本信息
    .box-card-info {
      margin-top: 20px;
    }
    // 用户画像
    .echartsBox {
      margin-top: 20px;
      .userIcon {
        width: 200px;
        height: 200px;
        // border-radius: 50%;
        // background-color: #e6e6e6;
        text-align: center;
        line-height: 200px;
        // margin-top: 50px;
        margin: 100px auto;
        // margin-left: 40px;
      }
      .tagBox {
        width: 100%;
        border: 1px solid #e6e6e6;
        padding: 10px 20px;
        margin: 15px 0;
        .title {
          border-left: 5px solid #7da4ff;
          padding-left: 10px;
        }
      }
    }
  }

  .el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: left;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: transparent;
    color: #333;
    text-align: center;
    line-height: 160px;
    border-radius: 30px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .text {
    font-size: 14px;
  }
  .user {
    background-color: transparent;
    text-align: center;
    line-height: 40px;
    margin-top: 5%;
    margin-bottom: 3%;
  }
  .userLabel {
    background-color: transparent;
    text-align: left;
    line-height: 80px;
    margin-bottom: 7%;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
</style>-->

